import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';

const subjects = [
  { id: 1, name: '语文', icon: 'book', topics: '重点知识点：文言文、古诗词' },
  { id: 2, name: '数学', icon: 'calculator', topics: '重点知识点：函数、导数' },
  { id: 3, name: '英语', icon: 'language', topics: '重点知识点：语法、阅读' },
  { id: 4, name: '物理', icon: 'flask', topics: '重点知识点：力学、电学' },
  { id: 5, name: '化学', icon: 'beaker', topics: '重点知识点：元素、反应' },
  { id: 6, name: '生物', icon: 'leaf', topics: '重点知识点：遗传、进化' },
];

export default function StudyScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        {/* 学习进度 */}
        <View style={styles.progressContainer}>
          <Text style={styles.sectionTitle}>学习进度</Text>
          <View style={styles.progressBar}>
            <View style={[styles.progressFill, { width: '60%' }]} />
          </View>
          <Text style={styles.progressText}>已完成 60%</Text>
        </View>

        {/* 知识点列表 */}
        <View style={styles.subjectsContainer}>
          <Text style={styles.sectionTitle}>知识点</Text>
          {subjects.map((subject) => (
            <TouchableOpacity key={subject.id} style={styles.subjectCard}>
              <View style={styles.subjectHeader}>
                <Ionicons name={subject.icon} size={24} color="#1890ff" />
                <Text style={styles.subjectName}>{subject.name}</Text>
              </View>
              <Text style={styles.subjectTopics}>{subject.topics}</Text>
              <View style={styles.subjectFooter}>
                <Text style={styles.progressLabel}>学习进度</Text>
                <View style={styles.miniProgressBar}>
                  <View style={[styles.miniProgressFill, { width: '30%' }]} />
                </View>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  progressContainer: {
    padding: 20,
    backgroundColor: '#fff',
    marginBottom: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  progressBar: {
    height: 8,
    backgroundColor: '#f0f0f0',
    borderRadius: 4,
    marginBottom: 10,
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#1890ff',
    borderRadius: 4,
  },
  progressText: {
    color: '#666',
    fontSize: 14,
  },
  subjectsContainer: {
    padding: 15,
  },
  subjectCard: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 10,
  },
  subjectHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  subjectName: {
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 10,
  },
  subjectTopics: {
    fontSize: 14,
    color: '#666',
    marginBottom: 15,
  },
  subjectFooter: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressLabel: {
    fontSize: 12,
    color: '#999',
    marginRight: 10,
  },
  miniProgressBar: {
    flex: 1,
    height: 4,
    backgroundColor: '#f0f0f0',
    borderRadius: 2,
  },
  miniProgressFill: {
    height: '100%',
    backgroundColor: '#1890ff',
    borderRadius: 2,
  },
});